import { deleteRegularRequest, getRegularRequest, reviseRegularRequest } from '@/apis/regular'
import { useColumsSearch } from '@/hooks/useColumsSearch'
import { storeAll } from '@/store'
import { layout } from '@/utils/contants'
import { Button, Cascader, Form, Modal, Popconfirm, Select, message } from 'antd'
import Table, { ColumnsType } from 'antd/es/table'
import React, { useEffect, useState } from 'react'

interface regularType {
	id: number
	uid: number
	pid: number
	username: string
	phone: number
	position: string
}
const RegularParking: React.FC = () => {
	const [regular, setRegular] = useState<regularType[]>([])
	const [currentRegular, setCurrentRegular] = useState<regularType>()
	const [open, setOpen] = useState<boolean>(false)
	const [form] = Form.useForm()
	const { carsStore: { getCars }, usersStore: { userOptions }, parkingStore: { options, parking, setOptions, getParkingLot } } = storeAll

	useEffect(() => {
		getRegular()
		setOptions(parking, 0)
	}, [setOptions, parking])

	const getRegular = () => {
		getRegularRequest().then((res: any) => {
			setRegular(res.result)
		})
	}

	const deleteRegular = (id: number) => {
		deleteRegularRequest(id).then((res: any) => {
			message.success(res.message)
			getRegular()
			getCars()
		})
	}

	const opneModal = (record: regularType) => {
		form.setFieldsValue(record)
		setCurrentRegular(record)
		setOpen(true)
		setOptions(parking, 0, record.pid)
	}

	const onCancel = () => {
		form.resetFields()
		setOpen(false)
	}

	const onFinish = (value: any) => {
		value.pid = Array.isArray(value.position) ? value.position[2] : currentRegular?.pid
		reviseRegularRequest(value).then((res: any) => {
			message.success(res.message)
			getRegular()
			getParkingLot()
			onCancel()
		})
	}

	const columns: ColumnsType<regularType> = [
		{
			dataIndex: 'username',
			title: '用户',
			...useColumsSearch<regularType>().getColumnSearchProps('username')
		},
		{
			dataIndex: 'phone',
			title: '用户联系电话'
		},
		{
			dataIndex: 'position',
			title: '位置'
		},
		{
			title: '操作',
			dataIndex: 'action',
			render: (_, record) => {
				return <>
					<Button type="primary" danger>
						<Popconfirm
							title="Delete the task"
							description="你确定要删除此固定车位吗，删除后会变为空闲"
							okText="确定"
							cancelText="取消"
							onConfirm={() => deleteRegular(record.id)}
						>
							删除
						</Popconfirm>
					</Button>
					<Button type="primary" onClick={() => { opneModal(record) }}>
						修改
					</Button>
				</>
			}
		}
	]
	return <div className="regularParkingWrap">
		<Table dataSource={regular} columns={columns} rowKey={(record) => record.id}></Table>
		<Modal footer={null} title="修改固定车位" open={open} onCancel={onCancel}>
			<Form form={form} onFinish={onFinish} {...layout}>
				<Form.Item name={['id']} label="id" style={{ display: 'none' }}>
				</Form.Item>
				<Form.Item name={['uid']} label="用户" rules={[{ required: true, message: '请选择用户' }]}>
					<Select options={userOptions} defaultValue={form.getFieldValue('uid')}></Select>
				</Form.Item>
				<Form.Item name={['position']} label="位置" rules={[{ required: true, message: '请选择车位' }]}>
					<Cascader options={options}></Cascader>
				</Form.Item>
				<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
					<Button type="primary" htmlType="submit">
						修改
					</Button>
				</Form.Item>
			</Form>
		</Modal>
	</div>
}

export default RegularParking